<template>
    <div>
        <user-top :title="msg"></user-top>
        <div class="name-code" @click="GoClick">
             <img src="../../../assets/img/nameCode2.jpg" alt="">
        </div>
        <div class="nameScenceTitle">推荐场景</div>
        <div class="nameScene">
            <div class="recommed">
                <img src="../../../assets/img/namere1.png" alt="">
                <p>淘宝扫脸登录</p>
            </div>
            <div class="recommed">
                <img src="../../../assets/img/namere2.png" alt="">
                <p>咸鱼买卖</p>
            </div>
            <div class="recommed">
                <img src="../../../assets/img/namere3.png" alt="">
                <p>码上寄件</p>
            </div>
        </div>
        <div class="nameScenceTitle">全部场景</div>
        <name-scene></name-scene>
    </div>
</template>

<script>
import UserTop from "@/components/userMine/usertop.vue"
import NameScene from "@/components/userMine/nameScene.vue"
export default {
    name: "nameCode",
    data() {
        return {
            msg: '阿里实人通行证'
        }
    },
    components: {
        UserTop,
        NameScene
    },
    methods:{
        backClick(){
            this.$router.push("/userMine")
        },
        GoClick(){
            this.$router.push("/nameCode")
        },
    }
}
</script>

<style lang="scss" scoped>

.name-code{
    width: 100%;
    text-align: center;
    img{
        width: 94%;
        margin: 20px 0;
    }
}
.nameScenceTitle{
    margin: 0 20px;
    font-size: 32px;
}
.nameScene{
    display: flex;
    justify-content: space-around;
    margin: 20px;

    .recommed{
        height: 150px;
        width: 170px;
        text-align: center;
        padding: 20px 20px 0 20px ;
        box-shadow: 0px 0px 5px 1px #cec6c6;

        img{
            height: 90px;
        }
        p{
            font-size: 28px;
        }
    }
}
</style>